<script setup lang='ts'>
import { useStaffsStore } from '@/store/useStaffsStore';
import {ref,onMounted, watchEffect} from 'vue'
import { storeToRefs } from 'pinia';
import NoFound from '../../components/MainBody/NoInfo/index.vue';
import Pagination from '../../components/MainBody/Pagination/index.vue'
import staffInfo from './staffInfo.vue';
import HeadInfo from './head.vue';
// 使用仓库
const staffsStore = useStaffsStore()
const {stateStaffs} = storeToRefs(staffsStore)

const newData:any = ref([]) 

// 监测是否有数据
const NoInfo = ref(false)
const allDataCount:any = ref(stateStaffs.value.length)  //数据数


//更新最新一页的数据，也就是最后一页
const showData = (start:number)=>{
    newData.value = []
    for(let i=start;i<(start+5);i++){
        if(i==stateStaffs.value.length){break}
        newData.value.push(stateStaffs.value[i])
    }
    console.log(newData.value)
}

const updatePagin= (Data:any)=>{
    const start = (Data.pagin-1)*5
    showData(start)
}

//监听员工信息变化
watchEffect(()=>{
    const t = stateStaffs.value.length
    allDataCount.value = t
    //判断数据是否为空 
    if(allDataCount.value==1)
    {
        NoInfo.value = true
    }else{
        NoInfo.value = false
    }
    const nowPagin = Math.floor(t/5)    //获取当且最后一条数据在哪一页
    showData(nowPagin)  //重新更新最后一页的数据
})




onMounted(async ()=>{
    await staffsStore.getAllStaff()
    showData(0)
})

</script>

<template>
<div>
    <div>
        <HeadInfo/>
        <NoFound v-if="NoInfo" />
        <div v-else class="l">
            <staffInfo v-for="(item,index) in newData" :key="index" :name="item.staff_name" :department="item.staff_department" :address="item.staff_address" :job-time="item.staff_time" :position="item.staff_position" :phone="item.staff_phone" />
            <Pagination :all-data-count="allDataCount" @update-pagin="updatePagin" /> 
        </div>
    </div>
</div>
</template>


<style scoped>
.l{
    min-height: 70vh;
    background-color: white;
}
</style>